<?php
    $this->load->view('wx/public/header.html', [
        'time' => time(),
        'css' => [
            'assets/wx/css/detail.css',
            'assets/library/aui/css/aui-slide.css'
        ]
    ]);
?>

<body class="product-detail" ng-controller="wx-goods-detail-controller">

<div class="top-bar">
    <div ng-click="gotoVideo()" class="live" ng-hide="!detail.liveUrl"></div>
    <div class="base" ng-click="gotoBase()" ng-if="detail.baseId > 0"></div>
</div>

<div id="aui-slide2" style="width: 100%; height: 100vw;">
    <div class="aui-slide-wrap" id="slider-box"></div>
    <div class="aui-slide-page-wrap"><!--分页容器--></div>
</div>

<section class="aui-content">
    <div class="aui-card-list aui-margin-b-10">
        <div class="aui-card-list-footer gu-detail-card-list-footer">
            <div class="gu-detail-goods-name">
                <h3 class="detail-title"><img src="/assets/wx/img/activity.png" ng-if="detail.activity" style="height: 10px;"> <span ng-bind="detail.goodsName"></span></h3>
                <p ng-hide="detail.description == ''" class="detail-description" ng-bind="detail.description"></p>
                <h2 ng-bind="'￥ ' + topPriceShow"></h2>
                <small ng-hide="topOldPriceShow == topPriceShow">原价 <span ng-bind="'￥ ' + topOldPriceShow"></span></small>
            </div>
        </div>
        <div class="aui-card-list-footer gu-detail-txt-property" style="font-size: 12px; padding-bottom: 7px;">
            <div style="width: 33%; float:left;" ng-bind="'运费: ' + (detail.expType == 1 ? '按重量' : (detail.expAmount == 0 ? '卖家包邮' : '一口价 ' + detail.expAmount_format + '元'))"></div>
            <div class="aui-text-center" style="width: 33%; float: left; " ng-bind="'总库存：' + detail.stock + '件'"></div>
            <div style="width: 33%;" class="aui-text-right" ng-bind="'销量：' + detail.sold + ' 件'"></div>
        </div>
    </div>
</section>

<section class="aui-grid aui-margin-b-10">
    <div class="aui-row gu-liucheng">
        <div class="aui-col-xs-3 gu-col-xs">
            <span class="next"></span>
            <p><img src="<?=base_url()?>assets/wx/img/step1.png" alt=""></p>
            <div class="aui-grid-label">用户下单</div>
        </div>
        <div class="aui-col-xs-3 gu-col-xs">
            <span class="next"></span>
            <p><img src="<?=base_url()?>assets/wx/img/step2.png" alt=""></p>
            <div class="aui-grid-label">商家发货</div>
        </div>
        <div class="aui-col-xs-3 gu-col-xs">
            <span class="next"></span>
            <p><img src="<?=base_url()?>assets/wx/img/step3.png" alt=""></p>
            <div class="aui-grid-label">物流配送</div>
        </div>
        <div class="aui-col-xs-3 gu-col-xs">
            <p><img src="<?=base_url()?>assets/wx/img/step4.png" alt=""></p>
            <div class="aui-grid-label">买家收货</div>
        </div>
    </div>
</section>

<section class="aui-content aui-margin-b-10">
    <div class="aui-card-list aui-padded-t-15 aui-margin-b-0">
        <!--
        <div class="aui-card-list-header" style="font-size: 14px; color: #333;">商品详情</div>
        -->
        <div class="aui-card-list-content" ng-bind-html="trustHtml"></div>
        <div class="aui-card-list-footer"></div>
    </div>
</section>

<div class="aui-content aui-margin-b-10 gu-goods-comment">
    <ul class="aui-list aui-media-list aui-margin-b-10">
        <li class="aui-list-header aui-border-b">评论列表</li>
        <li class="aui-list-item aui-list-item-middle" ng-repeat="c in comments">
            <div class="aui-media-list-item-inner">
                <div class="aui-list-item-media" style="width: 3rem;">
                    <img ng-src="{{ c.user.avatar }}" onerror="this.src='/assets/wx/img/head.png'" class="aui-img-round aui-list-img-sm">
                </div>
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-text">
                        <div class="aui-list-item-title aui-font-size-14" ng-bind="c.user.nickName"></div>
                        <div class="aui-list-item-right" ng-bind="c.created"></div>
                    </div>
                    <div class="aui-list-item-text" ng-bind="c.content"></div>
                </div>
            </div>
        </li>
    </ul>
    <a href="/comments/detail?goodsId={{ detail.goodsId }}" ng-hide="!comments.length || comments.length == 0" class="comments-footer">查看更多评论</a>
    <span ng-hide="comments.length > 0" class="comments-footer-nomore">~没有更多评论了~</span>
</div>


<div class="gu-related-line">
    <span class="aui-text-primary">相关产品</span>
</div>

<section class="aui-grid aui-margin-b-0 gu-realted">
    <div class="aui-row">
        <div ng-repeat="r in detail.related.data" class="aui-col-xs-6 gu-related-item">
            <a href="/detail?id={{ r.goodsId }}">
                <img class="aui-margin-b-5" ng-src="{{ r.thumb }}" onerror="" />
                <h4 ng-bind="r.goodsName" class="aui-text-default aui-ellipsis-1 aui-margin-b-5 aui-padded-b-5"></h4>
                <small><strong ng-bind="'￥' + r.price"></strong> <span class="pull-right" style="color: #CCCCCC; float: right; margin-right: 5px; font-size: 12px;" ng-bind="'库存 ' + r.stock"></span></small>
            </a>
        </div>
    </div>
</section>

<section class="aui-grid aui-margin-b-0 gu-detail-buy aui-border-t">
    <div class="aui-row">
        <a class="aui-col-xs-2 gu-footer-btn aui-border-r" href="/about/contact" style="height: 55px; padding-top: 4px;">
            <i class="aui-iconfont aui-icon-my"></i>
            <div class="aui-grid-label">客服</div>
        </a>
        <div class="aui-col-xs-2 gu-footer-btn" style="height: 55px; padding-top: 4px;" ng-click="collect()">
            <i class="aui-iconfont aui-icon-like aui-margin-t-5"  ng-class="{'active': detail.collected}"></i>
            <div class="aui-grid-label gu-collect" ng-class="{'active': detail.collected}">收藏</div>
        </div>
        <div class="aui-col-xs-4 gu-footer-btn gu-add-car" ng-click="alertAddCar()">
            <div class="aui-grid-label gu-add-car-text">加入购物车</div>
        </div>
        <div class="aui-col-xs-4 gu-footer-btn gu-buy-now" ng-click="alertBuyNow()">
            <div class="aui-grid-label gu-add-car-text">立即购买</div>
        </div>
    </div>
</section>


<!--弹出层-->
<div class="aui-popup aui-popup-bottom gu-alert-content" id="bottom">
    <div class="aui-popup-content gu-alert-inner-panel">
        <div class="aui-row aui-row-padded gu-alert-box">
            <div class="header">
                <div class="thumb">
                    <img ng-src="{{ detail.alertThumb }}" alt="">
                </div>
                <div class="close" ng-click="hidePop()"><i class="aui-iconfont aui-icon-close"></i></div>
                <div class="gu-header-title">
                    <h3 ng-bind="detail.goodsName" class="aui-ellipsis-1"></h3>
                    <p class="price-box">
                        <strong class="old-price" ng-if="selectedItem.oldPrice != selectedItem.salePrice" ng-bind="'￥' + selectedItem.oldPrice_format"></strong>
                        <strong ng-bind="'￥' + selectedItem.salePrice_format"></strong> <span class="stock" ng-bind="'剩余' + selectedItem.stock + '件'"></span>
                    </p>
                </div>
            </div>
            <div class="body">
                <div class="gu-inner rules">
                    <h2>规格说明</h2>
                    <i style="position: relative;" ng-click="selectedRule(index)" ng-class="{'active': r.selected}" ng-repeat="(index, r) in detail.rules" ng-bind="r.name"></i>
                </div>
                <div class="gu-inner select-num">
                    <div class="left">
                        <h2>选购数量</h2>
                        <span>已选择 <i ng-bind="goodsNum"></i> 件</span>
                    </div>
                    <div class="right">
                        <div class="num">
                            <button ng-click="num('down')" type="button">-</button>
                            <span ng-bind="goodsNum"></span>
                            <button ng-click="num('up')" type="button">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="btn" ng-class="{'add-car': alertType == 'car'}" ng-if="alertType == 'car'" ng-click="addToCar()">加入购物车</div>
                <div class="btn" ng-class="{'buy-now': alertType == 'buy'}" ng-if="alertType == 'buy'" ng-click="buyNow()">立即购买</div>
            </div>
        </div>
    </div>
</div>

<?php
    $this->load->view('wx/public/footer.html', [
        'time' => time(),
        'js' => [
            'assets/library/aui/script/aui-popup.js',
            'assets/library/aui/script/aui-slide.js',
            'assets/wx/js/goods/detail.js',
        ]
    ]);
?>

